<template>
  <div id="workUpList">
    <h1 class="con-right-title">
      <i class="fa fa-reply" @click="cancel"></i>
      {{ title }}/点赞列表
    </h1>
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="{ $index }">
          {{ $index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
        </template>
      </el-table-column>
      <el-table-column label="点赞人昵称">
        <template slot-scope="{ row }">
          {{ row.nickname }}
        </template>
      </el-table-column>
      <el-table-column label="点赞人头像">
        <template slot-scope="{ row }">
          <div class="img-box">
            <el-image fit="contain" :src="row.avatar"></el-image>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import { getLikesList } from '@/api/common/likesAPI'
export default {
  name: 'longVidUpList',
  msg: '长视频管理-长视频维护/我的发布-点赞列表',
  data() {
    return {
      id: null,
      loading: true,
      topicType: 14, // 1.社团 2.活动 3.作品 4.作业 5.回放视频 8.生活 14.长视频
      title: '', // 长视频维护/我的发布
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      }
    }
  },
  watch: {
    // $route.path改变时，mounted()不执行,通过监听$route.path，执行进入页面方法
    '$route.path': 'init'
  },
  mounted() {
    this.init()
  },
  // 路由离开时清空用户信息
  beforeRouteLeave(to, from, next) {
    if (to) {
      this.$destroy()
    }
    next()
  },
  methods: {
    /* 进入页面执行的方法 */
    init() {
      this.id = this.$route.query.id
      this.title =
        this.$route.query.from === 'longVid' ? '长视频维护' : '长视频发布'
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 获取列表 */
    async searchList() {
      this.loading = true
      let obj = {
        topicType: this.topicType,
        topicId: this.id,
        pageSize: this.searchParams.pageSize,
        pageNum: this.searchParams.pageNum
      }
      let response = await getLikesList(obj)
      this.loading = false
      this.tableData = response.rows
      this.total = response.total
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 后退 */
    cancel() {
      this.$router.go(-1)
      // let mId = this.$route.query.mId
      // let name =
      //   this.$route.query.from === 'longVid'
      //     ? 'longVidPList'
      //     : 'longVidMineList'
      // let query = {
      //   mId
      // }
      // this.$router.push({ name, query })
    }
  }
}
</script>

<style lang="less">
#workUpList {
  .con-right-title {
    i {
      cursor: pointer;
    }
  }

  .img-box {
    width: 40px;
    height: 40px;

    .el-image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
</style>
